<template>
    <Header :getGoods="getGoods" />
    <div class="information-container-main">
        <div class="information-content" :class="imageOrientationClass">
            <div v-if="isVerticalImage" class="image-and-info">
                <img :src="information.image" alt="咨询图片" @load="checkImageOrientation"/>
                <div class="info-details">
                    <div class="title">{{ information.title }}</div>
                    <div class="details-body">
                        <div class="creator-time">
                            <p>{{ username }}</p>
                            <p>于{{ information.createTime }}创建</p>
                        </div>
                        <!-- 使用 v-html 渲染 HTML 内容 -->
                        <div v-html="information.content"></div>
                    </div>
                </div>
            </div>
            <!-- 横图时，标题在图片上方 -->
            <div v-if="!isVerticalImage" class="title">{{ information.title }}</div>
            <div v-if="!isVerticalImage" class="image-wrapper">
                <img ref="horizontalImage" :src="information.image" alt="咨询图片" @load="checkImageOrientation"/>
            </div>
            <!-- 横图时，内容在图片下方，宽度与图片保持一致 -->
            <div v-if="!isVerticalImage" class="details-body" :style="{ width: horizontalImageWidth + 'px' }">
                <div class="creator-time">
                    <p>{{ username }}</p>
                    <p>于{{ information.createTime }}创建</p>
                </div>
                <!-- 使用 v-html 渲染 HTML 内容 -->
                <div v-html="information.content"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import Header from './Header.vue';

const getInforMatinoByIdLink = "http://localhost:8080/information/getInformationById";
const getUsernameLink = "http://localhost:8080/information/getUsername";
const loginId = Number(localStorage.getItem('userId'))
const username = ref('');

const props = defineProps<{ id: string }>();

const information = ref({
    id: 0,
    title: '',
    content: '',
    createUser: 0,
    createTime: '',
    image: ''
});

const isVerticalImage = ref(false);
const imageOrientationClass = ref('');
const horizontalImageWidth = ref(0); // 用于存储横图的宽度

const horizontalImage = ref<HTMLImageElement | null>(null); // 通过ref获取横图元素

const getInforMatinoById = async () => {
    try {
        const response = await axios.post(getInforMatinoByIdLink, props.id, {
            headers: { 'Content-Type': 'application/json' },
        });
        information.value = response.data.data;
    } catch (error) {
        console.error('Failed to fetch information:', error);
    }
};

const getUsername = async () => {
    try {
        const response = await axios.post(getUsernameLink, loginId, {
            headers: { 'Content-Type': 'application/json' },
        });
        username.value = response.data.data.username;
    } catch (error) {
        console.error('Failed to fetch username:', error);
    }
};

const getGoods = (filterObject: { name: string; platform: string; sortType: string; categoriesId: number }) => {
    // Handle the filtering logic
};

// 检查图片的宽高比来决定标题的位置
const checkImageOrientation = (event: Event) => {
    const img = event.target as HTMLImageElement;
    if (img.naturalWidth > img.naturalHeight) {
        // 横图，标题在图片上方
        isVerticalImage.value = false;
        imageOrientationClass.value = 'horizontal';
        horizontalImageWidth.value = img.naturalWidth; // 设置横图的宽度
    } else {
        // 竖图，标题和内容在图片右侧
        isVerticalImage.value = true;
        imageOrientationClass.value = 'vertical';
    }
};

onMounted(() => {
    getInforMatinoById();
    getUsername();  
});
</script>

<style scoped>
.information-container {
    padding: 20px;
    margin-top: 60px; /* 根据 Header 的高度调整 */
}

.information-content {
    display: flex;
    flex-direction: column; /* 默认垂直布局 */
    width: 100%;
    max-width: 1200px; /* 控制页面最大宽度，避免过于宽 */
}

.horizontal {
    align-items: center;
}

.vertical {
    flex-direction: row;
    align-items: center; /* 垂直居中 */
}

.image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px; /* 给图片下方留出空间 */
}

.image-and-info {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border: solid Silver 1px;
}

.title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.info-details {
    display: flex;
    flex-direction: column;
    margin-left: 20px; /* 图片与文本的间距 */
}

.details-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 动态宽度由模板部分控制，最大宽度设为100%防止溢出 */
    max-width: 100%;
}

.creator-time {
    display: flex;
    flex-direction: row;
    align-items: center;
}

p {
    margin: 5px 0;
}

.creator-time p {
    margin-right: 15px;
}


.vertical .info-details {
    margin-left: 20px; /* 图片和文本的空间 */
}


.information-container-main{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}
</style>

